<template>
	<div class="myorders">
		<router-link to="/mobile/myinfo"><div style="font-size: 1.5rem;"><返回</div></router-link>
		<div v-for="(item,i) in list" class="orders">
			<span class="outer">
				<h3>订单号:{{item.ordid}}</h3>
				<h4>付款情况:<span class="span1">{{item.payStatus==0? '未付款':'已付款'}}</span></h4>
				<h4>情况发货:<span class="span2">{{item.shipStatus==0? '未发货':'已发货'}}</span></h4>
			</span>
			<div class="ter">
				<div>
					<span>
						地址:{{item.ship2addr}}
					</span>
					<span>收货人:{{item.ship2name}}</span>
					<span>
						电话:{{item.ship2phone}}
					</span>
				</div>
				<button @click="gopay(item.ordid)">详情</button>
			</div>

			<details>
				<summary>我购买物品</summary>
				<ul v-for="(item2,index) in item.items">
					<li>
						{{item2.book.name}}
					</li>
				</ul>
			</details>
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		name: 'MobileMyOrders',
		data() {
			return {
				ordid: '',
				orderslist: [],
				list: [],
				pagenum: 0,
				lines: 5,
				isLoading: true
			}
		},
		created() {
			this.scroll()
		},
		methods: {
			gopay(ordid){
				this.$router.push({
					path:'mypay/'+ordid
				})
			},
			scroll() {
				let total = 0;
				if (this.isLoading) {
					this.pagenum = this.pagenum + 1; //每次分页+1
					this.$axios.post("/api/fore/ord/findPageOrders/" + this.pagenum + "/" + this.lines).then((res) => {
						if (res.status == 200) {
							this.orderslist = res.data.data
							console.log(this.orderslist);
							total = this.orderslist.total / this.pagenum //所有的条数/要回的条数=总页码数
							total = Math.ceil(total)
							if (this.pagenum <= total) {
								//单前页数大于或者等于总页码数并且
								console.log(1);
								this.list.push(...res.data.data.orders); //追加数据 使用 ...语法
								this.isLoading = true;
								if (this.orderslist.total == (this.pagenum * this.lines)) { //
									this.isLoading = false; //无数据可以加载
									this.itle = '已没有更多数据了';
								} else {
									this.scroll()
									//如果是真的继续调用
									//一次性加载所有数据
								}
							}
						}
					}).catch((error) => {
						console.log(error);
					})
				}
			}
		},
		
	}
</script>

<style scoped>
	.myorders {
		width: 100%;
	}

	.orders {
		background-color: #fffae8;
		word-spacing: 10px;
		font-size: 1rem;
		border: 1px solid palevioletred;
		width: 90%;
		margin: 1rem auto;
		border-radius: 3px;
	}

	.myorders .orders .outer {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0.5rem auto;
	}

	.myorders .orders .ter {
		display: flex;
		justify-content: space-between;
	}

	.myorders .orders .ter button {
		background-color: inherit;
		border: inherit;
		width: 20%;
	}

	.myorders .orders .ter div {
		display: flex;
		justify-content: space-evenly;
		flex-direction: column;

		overflow: hidden;

		white-space: nowrap;
		margin: 0.5rem 0;
	}

	.myorders .orders details {

		white-space: nowrap;
		overflow: hidden;
	}
</style>